import React, { useCallback, useState } from 'react';
import * as theme from './theme';

function Provider() {
  const [state, setState] = useState(theme.defaultTheme);
  theme.share.useProvide(state);
  const onSwitch = useCallback(() => {
    setState((c) => (c === theme.defaultTheme) ? theme.theme2 : theme.defaultTheme)
  }, []);
  return (
    <div onClick={onSwitch}>change (provider)</div>
  )
}

function Injecter() {
  const [theme1] = theme.share.useInject();
  return (
    <div>
      <h5>Injecter</h5>
      <pre>{JSON.stringify(theme1, null, 2)}</pre>
    </div>

  )
}

export default function Main() {
  console.log('render useShareType')
  return (
    <div>
      <Provider />
      <hr/>
      <Injecter />
    </div>
  )
}
